@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=DynaPuff&display=swap");
html {
box-sizing: border-box;
}
body {
margin: 0px 0px 0px 0px;
height: 100vh;
gap: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, #8e2de2, #4a00e0);
}
.winnerBoard{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
height: 20%;
background-color: rgba(255, 255, 255, 0.205);
font: 25px "Aboreto";
color: aquamarine;
border-radius: 10px;
box-shadow: 0px 0px 20px rgb(244, 0, 228);
z-index: 1;
}
#container {
display: flex;
width: 70%;
min-width: 40%;
height: 70%;
border-radius: 10px;
box-shadow: 0px 0px 20px rgb(244, 0, 228);
}
#left {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
height: 100%;
background-color: rgba(255, 255, 255, 0.586);
border-radius: 10px 0px 0px 10px;
}
#middleButtons {
/* margin-left: -100px; */
width: 20%;
height: 100%;
margin-top: 30px;
margin-left: -10%;
display: flex;
flex-direction: column;
align-items: center;
}
#right {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -10%;
width: 50%;
height: 100%;
background-color: rgba(255, 255, 255, 0.205);
border-radius: 0px 10px 10px 0px;
}
#playerHeading {
display: flex;
margin-top: 15%;
color: rgb(255, 255, 255);
font: 300% "DynaPuff";
text-shadow: 0px 0px 10px black;
}
#newGame {
display: flex;
font: 14px "Aboreto";
font-weight: 1000;
padding: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.555);
color: rgb(0, 0, 0);
gap: 5px;
z-index: 1;
align-items: center;
justify-content: center;
}
#newGame:hover {
cursor: pointer;
}
#rollDice:hover {
cursor: pointer;
}
#hold:hover {
cursor: pointer;
}
#rollDice {
margin-top: 20%;
display: flex;
font: 14px "Aboreto";
font-weight: 1000;
padding: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.555);
color: rgb(0, 0, 0);
align-items: center;
justify-content: center;
gap: 5px;
z-index: 1;
/* -webkit-user-select: none; */
}
#hold {
margin-top: 30%;
display: flex;
font: 14px "Aboreto";
font-weight: 1000;
padding: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.555);
color: rgb(0, 0, 0);
align-items: center;
justify-content: center;
gap: 5px;
z-index: 1;
}
.mainScore {
margin-top: 0px;
font: 50px "Aboreto";
color: #2b19d1;
}
.currentScore {
display: flex;
margin-top: 30px;
font: 20px "Aboreto";
color: white;
font-weight: 1000;
display: flex;
}
.current {
font: 20px "Aboreto";
color: white;
font-weight: 1000;
display: flex;
}
#wrapper {
margin-top: 20px;
border: 2px solid;
width: 180px;
border-radius: 10px;
background-image: radial-gradient(
circle farthest-corner at 22.4% 21.7%,
rgba(4, 189, 228, 1) 0%,
rgba(2, 83, 185, 1) 100.2%
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
}
#diceFaces {
display: flex;
margin-top: 25%;
opacity: 0;
border-radius: 10px;
}